<template>
  <div>
    <textarea type="text" :maxlength="maxLength" ref="test" rows="1" class="c-bd0 c-w100 c-fs24" v-model="value" :placeholder="placeholder || '请输入内容'" :disabled="disAble" @blur='inputBlur'
      @focus='inputFocus'></textarea>
    <div class="c-textAlign-r c-fc-sgray" v-if="showLength">{{value.length}}/{{maxLength}}</div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    disAble: {
      type: Boolean,
      default: false
    },
    showLength: {
      type: Boolean,
      default: false
    },
    maxLength: {
      type: Number,
      default: 5000
    },
    placeholder: {
      type: String,
      default: ''
    },
  },
  data() {
    return {

    }
  },
  watch: {
    value(newV, oldV) {
      if (newV == oldV) {
        return
      }
      this.value = newV
      this.$emit('onChangeInput', this.value)
      this.changeHeight()
    }
  },
  methods: {
    changeHeight() {
      let _this = this
      this.$nextTick(() => {
        var textArea = _this.$refs.test
        var scrollHeight = textArea.scrollHeight // 控件所有的高度
        var height = textArea.offsetHeight // 屏幕上显示的高度
        if (height <= scrollHeight) {
          textArea.style.height = 'auto' // 恢复默认值，根据内容自适应textarea高度
          textArea.style.height = textArea.scrollHeight + 'px' // 拿到最新的高度改变textarea的高度
        }
      })
    },
    inputBlur() {
      console.log('onblur')
      this.$emit('on-blur')
    },
    inputFocus() {
      this.$emit('focus')
    }
  }
}
</script>

<style scoped>
textarea {
  resize: none;
}
</style>